<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${survey.title}预览</title>
    <link rel="stylesheet" href="../../static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/question.css" media="all">
</head>
<body>
<div class="layuimini-container bg" style="position: absolute;bottom: 0px;top: 40px;left: 0px;right:0px;margin: 10px;">
<%--    <h4>数据统计只展示选择题</h4>--%>

    <div class="preview" id="preview" style="overflow: auto;">
        <div style="width: 100%;height: 250px;">
            <div id="main" style="width: 320px;height:260px;margin: 0 auto"></div>
        </div>

        <ul class="content">

            <c:forEach items="${survey.questions}" var="question" varStatus="status">
                <c:if test="${question.type == 1  or question.type == 2 }">
                    <div class="radioTemplate spliter">
                        <li class="using radio">
<%--                            <input type="hidden">--%>
                            <div class="title">
                                <div class="no_edit"><strong>${status.index+1}、${question.title}</strong></div>
                                <c:if test="${question.remark != null && question.remark != ''}">
                                    <div class="no_edit">${question.remark}</div>
                                </c:if>
                            </div>
                            <div class="options">
                                <ul>
                                    <c:forEach items="${question.options}" var="option">
                                        <li>
                                           <table>
                                               <tr>
                                                   <td>
                                                       <div style="margin: 5px;height: 5px;width: 15px;"></div>
                                                   </td>
                                                   <td width="800px">${option.opt}</td>
                                                   <td>
                                                       ${option.num}/${total}
                                                   </td>
                                               </tr>

                                           </table>
                                        </li>
                                    </c:forEach>


                                </ul>
                            </div>
                        </li>

                    </div>
                </c:if>

            </c:forEach>
        </ul>
    </div>
</div>

<script src="https://lib.baomitu.com/echarts/5.0.0/echarts.common.js" charset="utf-8"></script>
<script src="../../static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../static/js/lay-config.js" charset="utf-8"></script>
<script type="text/javascript">
    console.log(${msg});
    console.log("${msg}");
    console.log(${myech});

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data: ${myech},
                itemStyle: {
                    // 阴影的大小
                    shadowBlur: 100,
                    // 阴影水平方向上的偏移
                    shadowOffsetX: 0,
                    // 阴影垂直方向上的偏移
                    shadowOffsetY: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script>
    layui.use(['jquery','layer'],function () {
        console.log("${str}");
        let $ = layui.jquery, layer = layui.layer;
        $('.radio_type,.checkbox_type,.input_type,.text_type').on('click',function(){
            if(isEditing()){
                layer.msg("正在编辑，请先保存");
                return;
            }
            $('.content').find(".using").removeClass("using");
            let template = loadTemplation($(this).prop("className"));
            $('.content').append($(template));
            $('#main').animate({scrollTop:$(".content").height()}, 300);
        });

    });
</script>
</body>
</html>